<template>
	<view class="user-order">
		<tabs :active="active" @change="changeShow" :config="{itemWidth: 180}">
			<tab v-for="(item, index) in order" :key="index" :title="item.name" :name="item.type">
				<!-- <order-list v-if="item.isShow" :order-type="item.type" :ref="'order' + item.type"></order-list> -->
				<view class="all">
					<!-- <view class="list" @click="toxq(items.title,items.price,items.order_sn,items.order_status)"
						v-for="(items,indexs) in list" :key="indexs">
						<view class="list_top">
							<image src="../../static/images/icon_like.png" mode=""></image>
							<view class="list_right">
								<view class="ltop">
									<p style="color: #000000;font-size: 30rpx;">{{items.title}}</p>
									<p style="color: #20bf50;ffont-size: 30rpx;">{{item.name}}</p>
								</view>
								<view class="lbot">
									<p style="color: #ED1C24;font-size: 35rpx; font-weight: bold;">+{{items.price}}</p>
									<p style="color: #CCCCCC;font-size: 30rpx;">订单编号:{{items.order_sn}}</p>
								</view>
							</view>
						</view>
						<view class="time" v-show="items.time?true:false">
							<p style="color: #CCCCCC;font-size: 35rpx;margin-top: 20rpx;">
								<text style="color: #F43F3B;">剩余时间</text>
								<u-count-down  :timestamp="items.time" color="#F43F3b">
								</u-count-down>
							</p>
						</view>
					</view> -->
					<view class="list" v-for="(item,index) in list" :key="index">
						<view class="lists" @click="todetails(item.video_url,item.content,item.title,item.id,item.price)">
							<image src="../../static/images/my_portrait_empty.png" mode=""></image>
							<view class="task_text">
								<p style="font-size: 35rpx;font-weight: bold;color: #000000;">{{item.title}}</p>
								<p class="p1">{{item.content}}</p>
							</view>
							<button
								style="background-color:#FF2C3C;color: #FFFFFF; height: 50rpx;line-height: 50rpx;width: 100rpx;">+{{item.price}}</button>
						</view>
						<view class="type">
							<view class="type_text1">
								任务分类:{{item.type}}
							</view>
							<view class="type_text2">
								任务名额:{{item.max_num}}
							</view>
						</view>
					</view>
				</view>
			</tab>
		</tabs>
		<!-- <float-tab></float-tab> -->
	</view>
</template>

<script>
	import {
		taskType
	} from '@/utils/type';
	import {
		waitSubmit
	} from '@/api/user';
	import {
		auditLists
	} from '@/api/user';
	import {
		ALLlists
	} from '@/api/user';
	import {
		through
	} from '@/api/user';
	import {
		unthrough
	} from '@/api/user';
	import {
		timeToDate
	} from '@/utils/wechath5.js';
	export default {
		data() {
			return {
				active: taskType.SUB,
				order: [{
						name: '全部',
						type: taskType.SUB,
						isShow: false
					},
					// {
					//      name: '待付款',
					//      type: orderType.PAY,
					//      isShow: false
					//    }, 
					{
						name: '抖音',
						type: taskType.EXAMINE,
						isShow: false
					},
					{
						name: '西瓜',
						type: taskType.ADOPT,
						isShow: false
					}, {
						name: '今日',
						type: taskType.FAIL,
						isShow: false
					},
					// {
					//      name: '已关闭',
					//      type: orderType.CLOSE,
					//      isShow: false
					//    },
				],
				list: [],
				times:"",
				time:"3600",
				index:""
			};
		},

		components: {},
		props: {},
		onShow() {
			this.changeShow(this.index);
		},
		onLoad: function(options) {
			const {
				order
			} = this
			let type = options.type || orderType.ALL;
			this.index = order.findIndex(item => item.type == type)
			this.changeShow(this.index);
		},

		// onPullDownRefresh: function() {
		// 	const {
		// 		active,
		// 		order
		// 	} = this
		// 	console.log(this.$refs['order' + order[active].type])
		// 	this.$refs['order' + order[active].type][0].reflesh()
		// },

		// onReachBottom: function() {
		// 	const {
		// 		active,
		// 		order
		// 	} = this
		// 	console.log(this.$refs['order' + order[active].type])
		// 	this.$refs['order' + order[active].type][0].getOrderListFun()
		// },
		methods: {
			changeShow(index) {
				let _this=this
				if (index != -1) {
					this.active = index
					this.order[index].isShow = true
				}
				let ontype = this.order[index].type
				console.log(ontype)
				
				if (ontype == "sub") {
					let data={
						type:0
					}
					ALLlists(data).then(res => {
						this.list = res.data
						console.log(this.list)
						for (var i = 0; i < _this.list.length; i++) {
							let timestamp = new Date().getTime();
							let newtime=timestamp/1000
							// console.log(newtime)
							// console.log(_this.list[i].end_time)
							let ctime=_this.list[i].end_time-newtime
							let hstime=Math.floor(ctime)
							_this.list[i].time=hstime
							console.log(timeToDate(_this.list[i].end_time))
						}
					}, err => {})
				}
				if (ontype == "examine") {
					let data={
						type:1
					}
					ALLlists(data).then(res => {
						this.list = res.data
					}, err => {})
				}
				if (ontype == "adopt") {
					let data={
						type:2
					}
					ALLlists(data).then(res => {
						this.list = res.data
					}, err => {})
				}
				if (ontype == "Fail") {
					let data={
						type:3
					}
					ALLlists(data).then(res => {
						this.list = res.data
					}, err => {})
				}
			},
			toxq(title, price, order_sn,status) {
				uni.navigateTo({
					url: "../task-list/taskp-xq?title=" + title + "&price=" + price + "&order_sn=" + order_sn+"&status="+status
				})
			},
			todetails(url,content,title,id,price) {
				console.log(12)
				uni.navigateTo({
					url: "../sort/details?url="+url+"&content="+JSON.stringify(content)+"&title="+JSON.stringify(title)+"&id="+id+"&price="+price
				})
			},
		}
	};
</script>
<style lang="less">
	// .all {
	// 	padding: 0 40rpx;

	// 	.list {
	// 		margin-top: 50rpx;
	// 		width: 100%;
	// 		height: 250rpx;
	// 		border-radius: 20rpx;
	// 		background-color: #FFFFFF;
	// 		padding: 30rpx 30rpx;

	// 		.list_top {
	// 			display: flex;

	// 			image {
	// 				width: 100rpx;
	// 				height: 100rpx;
	// 			}

	// 			.list_right {
	// 				width: 80%;
	// 				margin-left: 20rpx;

	// 				.ltop {
	// 					display: flex;
	// 					justify-content: space-between;
	// 				}

	// 				.lbot {
	// 					margin-top: 20rpx;
	// 				}
	// 			}
	// 		}
	// 	}
	// }
		.list {
			padding: 0 30rpx;
			margin-top: 20rpx;
			.lists {
				background: #FFFFFF;
				width: 100%;
				height: 200rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 15rpx 15rpx 0 20rpx;

				image {
					width: 20%;
					width: 100rpx;
					height: 100rpx;
				}

				.task_text {
					width: 60%;
					.p1{
						overflow:hidden; 
						text-overflow:ellipsis;
						display:-webkit-box; 
						-webkit-box-orient:vertical;
						-webkit-line-clamp:2;
						font-size: 25rpx;
						color: #999999;
					}
				}
			}

			.type {
				padding: 0 80rpx;
				background-color: #f5fafe;
				height: 70rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
			}
		}
	
</style>
